<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">房产项目</label>

        <el-select
          v-model="query.realEstateProjectId"
          clearable
          filterable
          placeholder="请选择"
          style="width: 185px"
          class="filter-item"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item in dict.real_estate_project_id"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <label class="el-form-item-label">交付时间</label>

        <el-date-picker
          v-model="query.deliverTime"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
        />
        <label class="el-form-item-label">开盘时间</label>

        <el-date-picker
          v-model="query.openTime"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
        />
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog
        :close-on-click-modal="false"
        :before-close="crud.cancelCU"
        :visible.sync="crud.status.cu > 0"
        :title="crud.status.title"
        width="800px"
      >
        <el-row :gutter="30">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            size="small"
            label-width="100px"
          >
            <el-col :span="18">
              <el-form-item label="关联房产项目">
                <el-select
                  v-model="form.realEstateProjectId"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in dict.real_estate_project_id"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px" label-position="left"> -->
            <el-col :span="18">
              <el-form-item label="房产项目名称" prop="realEstateProjectName">
                <el-input
                  v-model="form.realEstateProjectName"
                  placeholder="请输入房产项目名称"
                  clearable
                  prefix-icon="el-icon-caret-right"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="物业类别" prop="propertyCategory">
                <el-input
                  v-model="form.propertyCategory"
                  placeholder="请输入物业类别"
                  clearable
                  prefix-icon="el-icon-caret-right"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="备案名" prop="recordName">
                <el-input
                  v-model="form.recordName"
                  placeholder="请输入备案名"
                  clearable
                  prefix-icon="el-icon-caret-right"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="项目特色" prop="projectFeatures">
                <el-input
                  v-model="form.projectFeatures"
                  placeholder="请输入项目特色"
                  clearable
                  prefix-icon="el-icon-caret-right"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="建筑类别" prop="buildingCategory">
                <el-input
                  v-model="form.buildingCategory"
                  placeholder="请输入建筑类别"
                  clearable
                  prefix-icon="el-icon-caret-right"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="装修状况" prop="decorateSituation">
                <el-input
                  v-model="form.decorateSituation"
                  placeholder="请输入装修状况"
                  clearable
                  prefix-icon="el-icon-caret-right"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="开发商" prop="propertyDevelopers">
                <el-input
                  v-model="form.propertyDevelopers"
                  placeholder="请输入开发商"
                  clearable
                  prefix-icon="el-icon-caret-right"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="项目地址" prop="projectAddress">
                <el-input
                  v-model="form.projectAddress"
                  placeholder="请输入项目地址"
                  clearable
                  prefix-icon="el-icon-caret-right"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="咨询电话" prop="consultingTelephone">
                <el-input
                  v-model="form.consultingTelephone"
                  placeholder="请输入咨询电话"
                  :maxlength="11"
                  clearable
                  prefix-icon="el-icon-mobile-phone"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="售楼地址" prop="saleAddress">
                <el-input
                  v-model="form.saleAddress"
                  placeholder="请输入售楼地址"
                  clearable
                  prefix-icon="el-icon-caret-right"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="交付时间" prop="deliverTime">
                <el-date-picker
                  type="datetime"
                  v-model="form.deliverTime"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :style="{ width: '100%' }"
                  placeholder="请选择交付时间"
                  clearable
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="开盘时间" prop="openTime">
                <el-date-picker
                  type="datetime"
                  v-model="form.openTime"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :style="{ width: '100%' }"
                  placeholder="请选择开盘时间"
                  clearable
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="价格左区间" prop="minimumPrice">
                <el-input
                  v-model="form.minimumPrice"
                  placeholder="请输入价格左区间"
                  clearable
                  prefix-icon="el-icon-caret-right"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="价格右区间" prop="maximumPrice">
                <el-input
                  v-model="form.maximumPrice"
                  placeholder="请输入价格右区间"
                  clearable
                  prefix-icon="el-icon-caret-right"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="绿化率" prop="greeningRate">
                <el-input-number
                  v-model="form.greeningRate"
                  placeholder="绿化率"
                  :step="1"
                  :max="100"
                >
                </el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="容积率" prop="plotRatio">
                <el-input-number
                  v-model="form.plotRatio"
                  placeholder="容积率"
                  :step="1"
                  :max="100"
                  style="margin-right: 180px"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="开关" prop="onSale" required>
                <el-switch
                  v-model="form.onSale"
                  active-text="在售"
                  inactive-text="停售"
                  active-color="#53DD30"
                  inactive-color="#F11C1C"
                ></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="物业公司名称" prop="propertyCompanyName">
                <el-input
                  v-model="form.propertyCompanyName"
                  placeholder="请输入物业公司名称"
                  clearable
                  prefix-icon="el-icon-caret-right"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="物业费" prop="propertyFee">
                <el-input
                  v-model="form.propertyFee"
                  placeholder="请输入物业费"
                  clearable
                  prefix-icon="el-icon-caret-right"
                  :style="{ width: '100%' }"
                >
                  <template slot="append">元/m²·月</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="占地面积" prop="floorSpace">
                <el-input
                  v-model="form.floorSpace"
                  placeholder="请输入占地面积"
                  clearable
                  prefix-icon="el-icon-caret-right"
                  :style="{ width: '100%' }"
                >
                  <template slot="append">亩</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="建筑面积" prop="coveredArea">
                <el-input
                  v-model="form.coveredArea"
                  placeholder="请输入建筑面积"
                  clearable
                  prefix-icon="el-icon-caret-right"
                  :style="{ width: '100%' }"
                >
                  <template slot="append">万平方米</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="总户数" prop="householdsTotal">
                <el-input
                  v-model="form.householdsTotal"
                  placeholder="请输入总户数"
                  clearable
                  prefix-icon="el-icon-caret-right"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="停车位总数" prop="parkingSpaceTotal">
                <el-input
                  v-model="form.parkingSpaceTotal"
                  placeholder="请输入停车位总数"
                  clearable
                  prefix-icon="el-icon-caret-right"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="楼栋总数" prop="buildingTotal">
                <el-input
                  v-model="form.buildingTotal"
                  placeholder="请输入楼栋总数"
                  clearable
                  prefix-icon="el-icon-caret-right"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="楼层状况" prop="floorCondition">
                <el-input
                  v-model="form.floorCondition"
                  placeholder="请输入楼层状况"
                  clearable
                  prefix-icon="el-icon-caret-right"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="房产项目标签" prop="projectLabel">
                <el-input
                  v-model="form.projectLabel"
                  placeholder="请输入房产项目标签"
                  clearable
                  prefix-icon="el-icon-caret-right"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="项目简介" prop="projectBrief">
                <el-input
                  v-model="form.projectBrief"
                  type="textarea"
                  placeholder="请输入项目简介"
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>

        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button
            :loading="crud.status.cu === 2"
            type="primary"
            @click="crud.submitCU"
            >确认</el-button
          >
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        size="medium "
        style="width: 120%"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          prop="realEstateProjectId"
          label="关联房产项目"
          width="120"
        >
          <template slot-scope="scope">
            {{
              dict.label.real_estate_project_id[scope.row.realEstateProjectId]
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="realEstateProjectName"
          label="房产项目名称"
          width="110"
        />
        <el-table-column
          prop="propertyCompanyName"
          label="物业公司名称"
          width="120"
        />
        <el-table-column prop="propertyCategory" label="房产分类" />
        <el-table-column prop="projectFeatures" label="房产特色" />
        <el-table-column prop="projectLabel" label="房产项目标签" width="110" />
        <el-table-column prop="recordName" label="备案名" />
        <el-table-column prop="buildingCategory" label="建筑类别" />
        <el-table-column prop="decorateSituation" label="装修状况" />
        <el-table-column prop="propertyDevelopers" label="开发商" />
        <el-table-column prop="projectAddress" label="项目地址" />
        <el-table-column
          prop="consultingTelephone"
          label="咨询电话"
          width="106"
        />
        <el-table-column
          prop="onSale"
          label="是否在售"
          :formatter="formatSale"
        ></el-table-column>
        <el-table-column prop="deliverTime" label="交付时间" width="180" />
        <el-table-column prop="openTime" label="开盘时间" width="180" />
        <el-table-column prop="saleAddress" label="售楼地址" />
        <el-table-column prop="floorSpace" label="占地面积" />
        <el-table-column prop="coveredArea" label="建筑面积" />
        <el-table-column prop="plotRatio" label="容积率" />
        <el-table-column prop="greeningRate" label="绿化率" />
        <el-table-column prop="latitude" label="房产项目纬度" />
        <el-table-column prop="longitude" label="房产项目精度" />

        <el-table-column
          prop="parkingSpaceTotal"
          label="停车位总数"
          width="110"
        />
        <el-table-column prop="buildingTotal" label="楼栋总数" />
        <el-table-column prop="householdsTotal" label="总户数" />

        <el-table-column prop="propertyFee" label="物业费" />
        <el-table-column prop="floorCondition" label="楼层状况" />
<!--        <el-table-column prop="projectBrief" label="项目简介" />-->
        <el-table-column prop="minimumPrice" label="楼盘价格左区间" />
        <el-table-column prop="maximumPrice" label="楼盘价格右区间" />

        <el-table-column
          v-if="
            checkPer([
              'admin',
              'realEstateProjectDetail:edit',
              'realEstateProjectDetail:del',
            ])
          "
          label="操作"
          width="150px"
          align="center"
        >
          <template slot-scope="scope">
            <udOperation :data="scope.row" :permission="permission" />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudRealEstateProjectDetail from "@/api/detail/realEstateProjectDetail";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import udOperation from "@crud/UD.operation";
import pagination from "@crud/Pagination";

const defaultForm = {
  realEstateProjectDetailId: null,
  realEstateProjectId: null,
  propertyCategory: null,
  projectFeatures: null,
  buildingCategory: null,
  decorateSituation: null,
  propertyDevelopers: null,
  projectAddress: null,
  consultingTelephone: null,
  deliverTime: null,
  onSale: 1,
  saleAddress: null,
  floorSpace: null,
  coveredArea: null,
  plotRatio: null,
  greeningRate: null,
  parkingSpaceTotal: null,
  buildingTotal: null,
  householdsTotal: null,
  propertyCompanyName: null,
  propertyFee: null,
  floorCondition: null,
  projectBrief: null,
  minimumPrice: null,
  maximumPrice: null,
  priceUnit: null,
  openTime: null,
  recordName: null,
  projectLabel: null,
  realEstateProjectName: null,
};
export default {
  name: "RealEstateProjectDetail",
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ["real_estate_project_id"],
  cruds() {
    return CRUD({
      title: "房产项目详情",
      url: "api/realEstateProjectDetail",
      idField: "realEstateProjectDetailId",
      sort: "realEstateProjectDetailId,desc",
      crudMethod: { ...crudRealEstateProjectDetail },
    });
  },
  data() {
    return {
      permission: {
        add: ["admin", "realEstateProjectDetail:add"],
        edit: ["admin", "realEstateProjectDetail:edit"],
        del: ["admin", "realEstateProjectDetail:del"],
      },
      rules: {
        realEstateProjectDetailId: [
          {
            required: true,
            message: "房产项目详情主键id不能为空",
            trigger: "blur",
          },
        ],
      },
      queryTypeOptions: [
        { key: "realEstateProjectId", display_name: "关联房产项目" },
      ],
    };
  },
  methods: {
    formatSale(row, column, cellValue) {
      if (cellValue === 1) {
        return "在售";
      } else if (cellValue === 0) {
        return "停售";
      }
    },
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true;
    },
  },
};
</script>

<style scoped>
</style>
